<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    用户名：<input type="text" id="username"><span></span><br>
    密码：<input type="text" id="password"><span></span><br>
    重复密码：<input type="text" id="password2"><span></span><br>
    <input type="button" value="提交" id="btn">
</body>
<script>
    // 8. 表单验证
    //     - 用户名：用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
    //     - 密码：数字字母特殊字符
    //         - 一种类型：弱。两种类型：中；三种类型：强
    //     - 重复密码：跟第一次输入 密码一致
    //     - 提交按钮的时候，判断所有输入数据是否符合。符合ok，否则，不ok

    var oun = document.getElementById("username");
    var opw = document.getElementById("password");
    var opw2 = document.getElementById("password2");
    var obtn = document.getElementById("btn");

    var unFlag,pwFlag,pw2Flag;
    unFlag = pwFlag = pw2Flag = false;

    oun.oninput = function(){
        // 获取输入框内容
        var str = this.value;
        // 根据规则，创建正则
        var reg = /^[\u2e80-\u9fff\w\-]{4,20}$/;
        // 根据正则，验证字符，提示对应信息
        if(reg.test(str)){
            this.nextElementSibling.innerHTML = "ok";
            unFlag = true;
        }else{
            this.nextElementSibling.innerHTML = "不ok，用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符";
            unFlag = false;
        }
    }

    opw.oninput = function(){
        // 获取输入框内容
        var str = this.value;
        // 创建正则（根据规则，不需要整体验证，只需要验证是否出现）
        var numReg = /\d/;
        var azReg = /[a-z]/i;
        var tsReg = /[^\da-z]/i;
        // 准备状态，用来记录是否出现某种类型
        var a,b,c;
        a=b=c=0;
        // 根据正则，验证，记录
        if(numReg.test(str)){
            a=1;
        }
        if(azReg.test(str)){
            b=1;
        }
        if(tsReg.test(str)){
            c=1;
        }
        // 将所有类型状态累加，根据值，判断难度
        switch(a+b+c){
            case 1:this.nextSibling.innerHTML = "弱";break;
            case 2:this.nextSibling.innerHTML = "中";break;
            case 3:this.nextSibling.innerHTML = "强";break;
        }

        pwFlag = true;

        // 在密码输入过程中，判断如果重复密码不为空
        if(opw2.value === "") return;
        // 也要进行重复密码验证
        if(this.value === opw2.value){
            opw2.nextSibling.innerHTML = "一致"
            pw2Flag = true
        }else{
            opw2.nextSibling.innerHTML = "不一致"
            pw2Flag = false
        }
    }

    opw2.oninput = function(){
        // 重复密码验证
        if(this.value === opw.value){
            this.nextSibling.innerHTML = "一致"
            pw2Flag = true
        }else{
            this.nextSibling.innerHTML = "不一致"
            pw2Flag = false
        }
    }

    obtn.onclick = function(){
        if(unFlag && pwFlag && pw2Flag){
            alert("成功")
        }else{
            alert("失败")
        }
    }








</script>
</html>